
var myChart0 = echarts.init(document.getElementById('body-down-left'));
var myChart1 = echarts.init(document.getElementById('body-down-middle'));
var myChart2 = echarts.init(document.getElementById('body-down-right'));

f_body_down_left();
f_body_down_middle();
f_body_down_right();

//设置图像左边折线图

function f_body_down_left(){

    myChart0.showLoading();
    var age = [];
    var number = [];

    $.ajax({
        type:'get',
        url:'json/community-parting-body-down-left.json',
        dataType:'json',
        success:function (result) {
            $.each(result.list, function (index, item) {
                age.push(item.age);
                number.push(item.number);
            });

            var option = {
                tooltip : {
                    trigger: 'axis',

                },
                color:['rgba(202,164,73,1)'],
                grid:{
                    left:50,
                    bottom:80,

                },
                legend: {
                    data:['意向','预购','成交'],
                    textStyle:{backgroundColor:'rgb(255,228,0)'},

                },
                calculable : true,
                xAxis : {
                    type : 'category',
                    boundaryGap : false,
                    data : age,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#FFFFFF'
                        }
                    }
                },
                yAxis : {
                    show:false,
                    splitLine:{
                        show:false,
                    }
                },
                series : [
                    {

                        type:'line',
                        smooth:true,		//曲线是否光滑
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},	//圆柱体的areStyle形式
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'red' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'blue' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            origin:'auto',
                        },
                        data:number,
                    }
                ],

            };

            myChart0.hideLoading();
            myChart0.setOption(option);

        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart0.hideLoading();
        },
    });

}



//设置矩形图
function f_body_down_middle(){



    myChart1.showLoading();
    var qualification = [];
    var number = [];

    $.ajax({
        type: 'get',
        url: 'json/community-parting-body-down-middle.json',
        dataType: 'json',
        success: function (result) {
            $.each(result.list, function (index, item) {
                qualification.push(item.qualification);
                number.push(item.number);
            });

            var option = {
                title:{

                },
                tooltip:{

                },
                legend:{
                    right:125,
                    top:20,
                },
                grid:{

                    bottom:80,
                },
                xAxis:{
                    data:qualification,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#FFFFFF'
                        }
                    }
                },
                yAxis:{
                    show:false,
                },
                series:[
                    {
                        type: 'bar',
                        data:number,
                        label: {
                            show:false,
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#F39800'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }

                ]

            };
            myChart1.hideLoading();
            myChart1.setOption(option);
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart1.hideLoading();
        },
    });


}



//设置圆形
function f_body_down_right() {




    myChart2.showLoading();

    $.ajax({
        type: 'get',
        url: 'json/community-parting-body-down-right.json',
        dataType: 'json',
        success: function (result) {

            var	option = {
                title : {

                },
                grid:{
                    bottom:120
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:['',''],
                },

                calculable : true,
                series : [
                    {
                        name:'',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#F1A317','#FFDC1D'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        data:result.list,
                    }
                ]
            };

            myChart2.hideLoading();
            myChart2.setOption(option);
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart1.hideLoading();
        },
    });
}




$(window).resize(function () {
    var w = $(window).width();
    var h = $(window).height();

    //body部分适配
    $(".body .body-top .body-left").css("width",(610/1920)*w+"px");
    $(".body .body-top .body-middle").css("width",(512/1920)*w+"px");
    $(".body .body-top .body-right").css("width",(610/1920)*w+"px");
    $(".body .body-down .body-down-left").css("width",(582/1920)*w+"px");
    $(".body .body-down .body-down-middle").css("width",(582/1920)*w+"px");
    $(".body .body-down .body-down-right").css("width",(582/1920)*w+"px");


    $(".body .body-top .body-left").css("height",(500/1080)*h+"px");
    $(".body .body-top .body-middle").css("height",(543/1080)*h+"px");
    $(".body .body-top .body-right").css("height",(500/1080)*h+"px");
    $(".body .body-down .body-down-left").css("height",(380/1080)*h+"px");
    $(".body .body-down .body-down-middle").css("height",(380/1080)*h+"px");
    $(".body .body-down .body-down-right").css("height",(380/1080)*h+"px");

    $(".body .footer").css("height",(20/1080)*h+"px");

    //适配右边搜索框的宽度
    $(".body .body-top .body-right .body-right-first .body-right-first-title").css("width",(145/1920)*w+"px");
    $(".body .body-top .body-right  .body-right-second .body-right-second-search").css("width",(541/1920)*w+"px");

    $(".body .footer").css("height",(100/1080)*h+"px");


    myChart0.resize();
    myChart1.resize();
    myChart2.resize();

});
$(document).ready(function () {

    var w = $(window).width();
    var h = $(window).height();

    //body部分适配
    $(".body .body-top .body-left").css("width",(610/1920)*w+"px");
    $(".body .body-top .body-middle").css("width",(512/1920)*w+"px");
    $(".body .body-top .body-right").css("width",(610/1920)*w+"px");
    $(".body .body-down .body-down-left").css("width",(582/1920)*w+"px");
    $(".body .body-down .body-down-middle").css("width",(582/1920)*w+"px");
    $(".body .body-down .body-down-right").css("width",(582/1920)*w+"px");


    $(".body .body-top .body-left").css("height",(500/1080)*h+"px");
    $(".body .body-top .body-middle").css("height",(543/1080)*h+"px");
    $(".body .body-top .body-right").css("height",(500/1080)*h+"px");
    $(".body .body-down .body-down-left").css("height",(380/1080)*h+"px");
    $(".body .body-down .body-down-middle").css("height",(380/1080)*h+"px");
    $(".body .body-down .body-down-right").css("height",(380/1080)*h+"px");

    $(".body .footer").css("height",(300/1080)*h+"px");

    //适配右边搜索框的宽度
    $(".body .body-top .body-right .body-right-first .body-right-first-title").css("width",(145/1920)*w+"px");
    $(".body .body-top .body-right  .body-right-second .body-right-second-search").css("width",(541/1920)*w+"px");



    myChart0.resize();
    myChart1.resize();
    myChart2.resize();
});